<template>
  <pull-to @scroll="scroll">
    <ul class="list">
      <li>
        (=ﾟωﾟ)ﾉ
      </li>
      <li>
        （/TДT)/
      </li>
      <li>
        π__π
      </li>
      <li>
        (´・ω・`)
      </li>
      <li>
        (☆ﾟ∀ﾟ)
      </li>
      <li>
        (╭￣3￣)╭♡
      </li>
      <li>
        (=ﾟωﾟ)ﾉ
      </li>
      <li>
        （/TДT)/
      </li>
      <li>
        π__π
      </li>
      <li>
        (´・ω・`)
      </li>
      <li>
        (☆ﾟ∀ﾟ)
      </li>
      <li>
        (╭￣3￣)╭♡
      </li>
      <li>
        (=ﾟωﾟ)ﾉ
      </li>
      <li>
        （/TДT)/
      </li>
      <li>
        π__π
      </li>
      <li>
        (´・ω・`)
      </li>
      <li>
        (☆ﾟ∀ﾟ)
      </li>
      <li>
        (╭￣3￣)╭♡
      </li>
      <li>
        (=ﾟωﾟ)ﾉ
      </li>
      <li>
        （/TДT)/
      </li>
      <li>
        π__π
      </li>
      <li>
        (´・ω・`)
      </li>
      <li>
        (☆ﾟ∀ﾟ)
      </li>
      <li>
        (╭￣3￣)╭♡
      </li>
      <li>
        (=ﾟωﾟ)ﾉ
      </li>
      <li>
        （/TДT)/
      </li>
      <li>
        π__π
      </li>
      <li>
        (´・ω・`)
      </li>
      <li>
        (☆ﾟ∀ﾟ)
      </li>
      <li>
        (╭￣3￣)╭♡
      </li>
    </ul>
  </pull-to>
</template>
<script>
import PullTo from '@/components/VuePullTo';

export default {
  name: 'bounce-scroll',
  components: {
    PullTo
  },
  methods: {
    scroll(data) {
      //console.log(data);
    }
  }
};
</script>
<style scoped lang="scss">
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.list {
  font-size: 16px;
  height: 100vh;
  li:nth-child(even) {
    background: #eee;
  }
}
&li {
  padding-left: 15px;
  height: 50px;
  line-height: 50px;
  background: #fff;

  a {
    display: block;
    height: 100%;
  }
}
</style>
